<template>
  <div class="deviceinfo">
    <div class="title">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="" v-show="formInline.cardStates == 1">
          <el-select
            v-model="formInline.smartstatus"
            placeholder="智能设备状态"
          >
            <el-option label="完好" :value="1"></el-option>
            <el-option label="待维修" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" v-show="formInline.cardStates == 2">
          <el-select
            v-model="formInline.familystatus"
            placeholder="家居设备状态"
          >
            <el-option label="完好" :value="1"></el-option>
            <el-option label="待维修" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-date-picker
            v-model="formInline.date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.homenum" placeholder="房号"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-tabs type="border-card" @tab-click="changeCardStates">
        <el-tab-pane label="智能设备">
          <el-table
            :data="tableData1"
            v-loading="loading"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="unitname"
              label="单元名称"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="buildnum"
              label="幢号"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="homenum"
              label="房号"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="homename"
              align="center"
              label="房主"
            ></el-table-column>
            <el-table-column
              prop="airnum"
              label="空调"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="wifiname"
              label="Wi-Fi"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="washnum"
              align="center"
              label="洗衣机"
            ></el-table-column>
            <el-table-column
              prop="createtime"
              align="center"
              label="授予时间"
              width="160"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.createtime.split("T")[0] +
                  " " +
                  scope.row.createtime.split("T")[1].split(".")[0]
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="smartstatus" align="center" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.smartstatus != 1">待维修</span>
                <span v-if="scope.row.smartstatus == 1">完好</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="`switch states:${scope.row.smartstatus}`"
                  placement="top"
                >
                  <el-switch
                    v-model="scope.row.smartstatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="2"
                    @change="handleSmartState(scope.row.id, scope.$index)"
                  >
                  </el-switch>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="page1" style="text-align: right">
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="pageNumber1"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pageSize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="家居设备">
          <el-table
            :data="tableData2"
            v-loading="loading"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="unitname"
              label="单元名称"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="buildnum"
              label="幢号"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="homenum"
              label="房号"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="homename"
              align="center"
              label="房主"
            ></el-table-column>
            <el-table-column
              prop="homedesk"
              label="书桌"
              width="80"
              align="center"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="homechair"
              label="椅子"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="homeclothes"
              align="center"
              label="衣柜"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="createtime"
              label="授予时间"
              width="160"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.createtime.split("T")[0] +
                  " " +
                  scope.row.createtime.split("T")[1].split(".")[0]
                }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="familystatus" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.familystatus != 1">待维修</span>
                <span v-if="scope.row.familystatus == 1">完好</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="`switch states:${scope.row.familystatus}`"
                  placement="top"
                >
                  <el-switch
                    v-model="scope.row.familystatus"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="2"
                    @change="handleHomeState(scope.row.id, scope.$index)"
                  >
                  </el-switch>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="page1" style="text-align: right">
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="pageNumber2"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pageSize2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total2"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //表格加载
      loading: false,
      //选时间范围
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },

      // 分页1
      pageNumber1: 1,
      pageSize1: 10,
      total1: 0,
      // 分页2
      pageNumber2: 1,
      pageSize2: 10,
      total2: 0,
      //表1数据
      tableData1: null,
      //表2数据
      tableData2: null,
      //title查询

      formInline: {
        smartstatus: null,
        familystatus: null,
        cardStates: 1, //卡片状态
        homenum: "",
        value: "",
        date: "",
      },
    };
  },
  methods: {
    //改卡片状态
    changeCardStates(val) {
      // console.log(val.label, "val");
      if (val.label == "智能设备") {
        this.formInline.cardStates = 1;
        // console.log(this.formInline.value);
      } else if (val.label == "家居设备") {
        this.formInline.cardStates = 2;
        // console.log(this.formInline.value);
      }
    },
    //改变家居状态数据
    handleHomeState(id, index) {
      console.log(id, "idid");
      // console.log(this.tableData1,'tabledata1')
      // console.log(index,'index')
      this.$confirm("是否改变状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          this.$axios
            .post("house/updatefamilyStatus", {
              id: id,
              familystatus: this.tableData2[index].familystatus,
              token: sessionStorage.getItem("token"),
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "改变成功!",
              });
              this.loading = false;
              this.getData2();
            });
        })
        .catch(() => {
          this.getData2();
          this.loading = false;
          this.$message({
            type: "info",
            message: "已取消改变",
          });
        });
    },
    //改变智能状态数据
    handleSmartState(id, index) {
      console.log(id, "idid");
      // console.log(this.tableData1,'tabledata1')
      // console.log(index,'index')
      this.$confirm("是否改变状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          this.$axios
            .post("house/updatesmartStatus", {
              id: id,
              smartstatus: this.tableData1[index].smartstatus,
              token: sessionStorage.getItem("token"),
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "改变成功!",
              });
              this.loading = false;
              this.getData1();
            });
        })
        .catch(() => {
          this.getData1();
          this.loading = false;
          this.$message({
            type: "info",
            message: "已取消改变",
          });
        });
    },
    //初始化两个表格
    getData1() {
      this.$axios
        .get("house/searchdeviceList", {
          params: {
            smartstatus: "",
            familystatus: "",
            homenum: "",
            startDate: "",
            endDate: "",
            currPage: this.pageNumber1 - 1,
            pageNum: this.pageSize1,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          //   console.log(res);
          this.total1 = res.data.total;
          this.tableData1 = res.data.data;
        });
    },
    getData2() {
      this.$axios
        .get("house/searchdeviceList", {
          params: {
            smartstatus: "",
            familystatus: "",
            homenum: "",
            startDate: "",
            endDate: "",
            currPage: this.pageNumber2 - 1,
            pageNum: this.pageSize1,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          //   console.log(res);
          this.total2 = res.data.total;
          this.tableData2 = res.data.data;
        });
    },
    //分页2
    handleSizeChange2(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize2 = val;
      this.getData2();
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber2 = val;
      this.getData2();
    },
    //分页1
    handleSizeChange1(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize1 = val;
      this.getData1();
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber1 = val;
      this.getData1();
    },
    //查询
    onSubmit() {
      // console.log(this.formInline, "forminline");
      if (this.formInline.cardStates == 1) {
        this.$axios
          .get("house/searchdeviceList", {
            params: {
              smartstatus: this.formInline.smartstatus,
              familystatus: this.formInline.familystatus,
              homenum: this.formInline.homenum,
              startDate: this.formInline.date[0],
              endDate: this.formInline.date[1],
              currPage: this.pageNumber1 - 1,
              pageNum: this.pageSize1,
              token: sessionStorage.getItem("token"),
            },
          })
          .then((res) => {
            // console.log(res, "res");
            this.tableData1 = res.data.data;
            this.total1 = res.data.total;
            this.formInline.smartstatus = "";
          });
      } else if (this.formInline.cardStates == 2) {
        this.$axios
          .get("house/searchdeviceList", {
            params: {
              smartstatus: this.formInline.smartstatus,
              familystatus: this.formInline.familystatus,
              homenum: this.formInline.homenum,
              startDate: this.formInline.date[0],
              endDate: this.formInline.date[1],
              currPage: this.pageNumber1 - 1,
              pageNum: this.pageSize1,
              token: sessionStorage.getItem("token"),
            },
          })
          .then((res) => {
            // console.log(res, "res");
            this.tableData2 = res.data.data;
            this.total2 = res.data.total;
            this.formInline.familystatus = "";
          });
      }
    },
  },
  created() {
    this.getData1();
    this.getData2();
  },
};
</script>
<style lang="scss" scoped>
.deviceinfo::v-deep {
  .content {
    .el-tabs__content {
      .el-table {
        thead {
          tr {
            th {
              font-size: 18px;
              color: black;
              background-color: #e9e9e9;
            }
          }
        }
      }
    }
  }
}
</style>